<%inherit file="/base.mako"/>\

<%namespace name="h" module="cpswarehouse.helpers"/>

<%def name="header()">Welcome</%def>

<p>
Welcome to the CPS Racial/Ethnic Survey Warehouse and Visualization
Tool.  This site is a simple visualization of 
<a href="http://research.cps.k12.il.us/cps/accountweb/Reports/RacialSurvey/">
publicly available data on the self-reported racial and ethnic make up</a> of
Chicago Public Schools. This site is not affiliated with the Chicago
Public Schools.
</p>

<p>
If you're interested in the racial make up of a particular school you
can look for the school on a map or 
<a href="${request.route_url("school_listing")}">browse for the
school by name</a>.  For more general information, checkout the most
diverse schools and the least diverse schools or 
<a href="${request.route_url("year_listing")}">look at the
overview information for a particular year</a>.  If you're technical
and interested in building a site like this one with some other data
source, be sure to check out the <a href="tutorial">tutorial</a>.
</p>

<h3>Find your school:</h3>
<div id="map-container">
  <div id="map" style="width: 800px; height: 400px"></div>
</div>

<h3>Student totals:</h3>
<div id="yearbyyear" style="width: 800px; height: 400px"></div>


<script type="text/javascript"> 
  ${yearbyyear|n}
</script>


<script type="text/javascript">
  // Call this function when the page has been loaded
  function initialize() {
    //map.addControl(new GSmallMapControl());

    var latlng = new google.maps.LatLng(41.850033,-87.650052);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);


    var markers = [];
    <% i = 0 %>
    % for school in schools:
    var school${i} = new google.maps.LatLng(${school.latitude}, ${school.longitude});
    var marker${i} = new google.maps.Marker({
        position: school${i}, 
        map: map,
        title:"${school.name}"
    });

    var infowindow${i} = new google.maps.InfoWindow({
        content: "<b>${h.titlecase(school.name)}</b><br/>${h.split_address(school.address)}<br/><br/><a href=\"${request.route_url("school_detail", school=school.name)}\">See school detail &raquo;</a>"
    });
    google.maps.event.addListener(marker${i}, 'click', function() {
      infowindow${i}.open(map, marker${i});
    });

    markers.push(marker${i});
    <% i+=1 %>
    % endfor
  }
  google.setOnLoadCallback(initialize);
</script>

